<template>
    <div class="subpage my-cart">
        <My-head :carthave="true" title="我的收藏"></My-head>

        <div class="w-all" v-if="PraiseList.length">
            <ul class="w-two">
                <li v-for="(l, i) in PraiseList" :key="i">
                    <router-link :to="{ name: 'bookDetail', params: { skuId: l.skuId }, query: { name: l.bookName } }">
                        <div class="w-ye">
                        <div class="w-zuo">
                            <p class="w-left">
                                <img :src="'https://img.welan.com/s/'+l.bookImg" alt="">
                            </p>
                        </div>
                            <div class="w-right">
                                <p class="w-name"> {{ l.bookName }} </p>
                                <div class="w-bm">
                                    <div class="w-price">
                                        <span>￥</span>
                                        <input class="w-pi" type="number" min="0" :value="l.bookPrice">
                                        <!-- <p> ￥{{ (l.detailsBook.sku.wlPrice).toFixed(2) }} </p> -->
                                    </div>
                                    <div class="li-cart">
                                        <van-icon name="cart-o" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </router-link>

                    <!-- <div class="w-delete">
                        <p>删除</p>
                    </div> -->
                </li>
            </ul>

        </div>

        <div v-else>
            <van-empty
            class="custom-image"
            image="https://m.welan.com/static/img/bookmarkDefault.429dc5b2.png"
            description="你还没有点赞记录哦！"
            />
        </div>


        
    </div>
</template>

<script>
export default {
    data() {
        return {
            PraiseList: [],
        }
    },
    methods: {
        getPraiseList() {
            this.$ajax.getPraiseOne({

            }).then((res) => {
                console.log(res);
                    this.PraiseList = res
            })
        },
    },
    mounted() {
        this.getPraiseList()
    },
    
}
</script>

<style lang="scss">

.w-in {
    width: 13px;
    height: 13px;
}

.w-pi {
    border: 0;
    // padding: 1px 5px;
}

.van-empty{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-70%);
}

.van-empty__image {
    width: 205px;
    height: 205px;
}

.van-empty__description {
    // margin: 0;
    padding: 0;
    font-size: 20px;
    color: #777;
}

.my-cart {
    padding-bottom: 100px;
    background-color: rgb(248, 246, 246);
    .w-all {
        margin-top: 10px;
        background-color: white;
        .w-top {
            display: flex;
            align-items: center;
            margin: 3.2vw 0 0;
            padding: 4.8vw 3.2vw 4.8vw;
            // .van-icon-checked {
            //     color: #1989fa;
            //     font-size: 22px;
            // }
            .w-book {
                font-size: 13px;
                margin-left: 2.133vw;
            }
        }
        .w-two {
             li {
                display: flex;
                flex-direction: column;
                padding: 2.133vw 4.267vw;
                box-shadow: 0 1px 0.8vw 0 rgb(0 0 0 / 10%), 0 1px 0.533vw 0 rgb(0 0 0 / 6%);
                .w-ye {
                    display: flex;
                    .w-zuo {
                        display: flex;
                        align-items: center;
                        // .w-in {
                        //     width: 13px;
                        //     height: 13px;
                        // }
                        .w-left {
                            height: 32vw;
                            width: 32vw;
                            padding: 0 10px;
                            margin-right: 2.133vw;
                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                    .w-right {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        -webkit-box-flex: 1;
                        -webkit-flex: 1;
                        flex: 1;
                        .w-name {
                            color: black;
                        }
                        .w-bm {
                            display: flex;
                            .w-price {
                                color: red;
                                font-size: 13px;
                            }
                            .li-cart {
                                // padding-right: 20px;
                                .van-icon-cart-o {
                                    color: red;
                                    font-size: 0.5rem;
                                    border: 1px solid red;
                                    padding: 0.533vw 0.533vw 0;
                                    border-radius: 1.6vw;
                                }
                            }
                        }
                        .w-up {
                            .w-ce {
                                display: flex;
                                justify-content: flex-end;
                                button {
                                    border: 0;
                                    width: 7.467vw;
                                    height: 7.467vw;
                                    font-size: 24px;
                                    color: #323233;
                                }
                                input {
                                    border: 0;
                                    background-color: #f2f3f5;
                                    text-align: center;
                                    margin: 0 0.533vw;
                                    width: 8.533vw;
                                    height: 7.467vw;
                                }
                            }
                        }
                    }
                }
                 .w-delete {
                    text-align: right;
                    padding-right: 4.267vw;
                }
             }
        }
    }

    .w-jie {
        .w-bu {
            padding: 1px 8px;
            margin-left: 12px;
            background-color: skyblue;
            border: 0;
            border-radius: 20px;
        }
    }

    .van-submit-bar {
        bottom: 46px;
    }
}
</style>